<script lang="ts">
import {Vue, Component, Inject} from 'vue-property-decorator';
import PageTurn from "./PageTurn.vue";
import DiffContent from "./DiffContent.vue";
import {pluginType} from "../type";
@Component({
  components: {PageTurn, DiffContent}
})
export default class ToolBar extends Vue {
  @Inject("plugins")
  pluginsData!:pluginType[]
  mounted() {
    console.log("当前注册插件列表===>", this.pluginsData)
  }
}
</script>

<template>
<div class="cc-modal-tool-bar">
  <div v-for="(item, index) in pluginsData" :key="index" class="cc-modal-tool-bar__plugin">
    <component :is="item.name"></component>
  </div>
<!--  <div class="cc-modal-tool-bar__help">-->
<!--    <i class="el-icon-warning-outline" :style="{marginRight: '10px'}"></i>-->
<!--    帮助-->
<!--  </div>-->
</div>
</template>

<style scoped lang="scss">
.cc-modal-tool-bar{
  overflow: hidden;
  padding: 6px 10px;
  height: 30px;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  box-sizing: content-box;
  .cc-modal-tool-bar__help{
    float: right;
    padding: 0 6px;
    right: 5px;
    height:100%;
    display: flex;
    align-items: center;
  }
  .cc-modal-tool-bar__plugin{
    float: left;
    height: 100%;
  }

}
</style>